<template>
    <van-nav-bar title="商品详情页" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!--图片信息-->
    <van-image width="100%" height="200px" :src="imgArr[0]" @click="showImg"/>
    <div>
        <p style="color: red;">￥{{ productData.price }}</p>
        <p class="title">{{ productData.name }}</p>
    </div>

    <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="送至："
      placeholder="请选择所在地区"
      @click="show = true"
    />
    <van-popup v-model:show="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>

    <van-row justify="space-between"  align="bottom" style="color: #808080; font-size: 10px; padding-left: 30px;">
      <van-col span="6" :to="{}"><van-icon name="link-o" />分享</van-col>
      <van-col span="6"><van-icon name="star-o" />收藏</van-col>
      <van-col span="6"><van-icon name="gold-coin-o" />降价通知</van-col>
    </van-row>

    <van-grid :column-num="3" icon-size="88px">
      <van-grid-item v-for="item in productList" :key="item" :icon="item.img" :text="item.name" >
    </van-grid-item>
    </van-grid>
     
        <van-row justify="space-between"  align="bottom" style="color: #262626; font-size: 14px; padding-left: 30px;">
          <van-col span="6" :to="{}">商品介绍</van-col>
          <van-col span="6">规格参数</van-col>
          <van-col span="6">售后保障</van-col>
        </van-row>
    <div class="brief">
        <div v-html="productData.brief"></div>
        <!-- {{ productData.brief }} -->

    </div>

    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" dot @click="onClickIcon" />
      <van-action-bar-icon icon="cart-o" text="购物车" badge="5" @click="onClickIcon" />
      <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
      <van-action-bar-button type="warning" text="加入购物车"  @click="onClickIcon"/>
      <van-action-bar-button type="danger" text="立即购买" @click="onClickButton" />
    </van-action-bar>

</template>
<script setup lang="ts">
import { ProductApi } from '@/api';

import { showImagePreview } from 'vant';
import { onMounted, reactive ,ref} from 'vue';
import { showToast } from 'vant';
import { useRoute, useRouter } from 'vue-router';
import { useCascaderAreaData } from '@vant/area-data';
const route = useRoute()
const router = useRouter()
const show = ref(false);
const fieldValue = ref('');
const cascaderValue = ref('');
const options = useCascaderAreaData();
const onFinish = ({ selectedOptions }:any) => {
    show.value = false;
    fieldValue.value = selectedOptions.map((option:any) => option.text).join('/');
};


const productData = reactive({
    id:0,
    name: '',
    img: '',
    price: 0,
    brief:""
})

const productList = ref()

const CallProductList = () => { 
    ProductApi.select.call().then((res: any) => { 
        productList.value = res
          productList.value = productList.value.slice(9)
    })
}
const imgArr=ref([])
const CallProductApi = () => {
    ProductApi.select.call({id:id.value}).then((res: any) => {
        console.log(res);
        productData.name = res[0].name
        productData.img= res[0].img
        productData.price = res[0].price
        productData.brief = res[0].brief
        //防止点击商品图片的时候 出现多张图片信息
         imgArr.value=res[0].img.split(",")
    })
}
const id=ref(0)
onMounted(() => {
  
    id.value = route.query.id == undefined ? 0 : Number(route.query.id)
    console.log(id.value);
    
    CallProductList()
    CallProductApi()
})

//点击图片进行预览
const showImg = () => { 
    showImagePreview({
        images:imgArr.value,
        closeable: true,
    });
}

const onClickIcon = () => {console.log('点击图标');
};
const onClickButton = () => showToast('点击按钮');
const onClickLeft = () => history.back();
</script>

<style>
.van-swipe-item{
    width: 100% !important;
    height: 200px;
    margin-top: 40px;
} 
.van-swipe__track{
    height: 43% !important;
}
.van-overlay{
     height: 28% !important;
}
</style>